<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .one {
            width: 200px;
            height: 200px;
            border: 1px solid #333;
        }
    </style>
</head>

<body>
    <!-- 
    <div id="box1" class="one two three"></div>
    <div id="box2" class="one two three"></div>
    <p id="box3" class="one two three"></p>
    <p id="box4" class="one two three"></p> 
    -->
    <input type="checkbox" name="hobby" value="sing">
    <input type="checkbox" name="hobby" value="dance">
    <input type="checkbox" name="hobby" value="rap">
    <input type="checkbox" name="hobby" value="basketball">
</body>
<script>
    //浏览器的容错机制 => 变量没有定义,会到页面中查找对应id名的元素
    // a. 找到的 => 赋值给变量
    // b. 找不到 => 报错 xxx is not defined
    // console.log(box1);
    // console.log(one);
</script>
<script>
    // 注意
    // 1. JS操作元素之前需要先获取元素
    // 2. 


    // 获取元素的方法(函数)
    // document.getElementById("id名")  => 存在返回该元素,不存在 => null
    // document.getElementsByClassName("class名")  => 存在返回该元素的集合,不存在 => []
    // document.getElementsByTagName("标签名")     => 存在返回该元素的集合,不存在 => []
    // document.getElementsByName("name属性")      => 存在返回该元素的集合,不存在 => [](常用语表单元素)

    // id
    // var box1 = document.getElementById("box1"); // 对应id名获取元素 赋值给变量box1
    // console.log(box1);
    // var box5 = document.getElementById("box5"); // 对应id名获取元素 赋值给变量box5
    // console.log(box5);

    // class
    // var oneList = document.getElementsByClassName("one");
    // console.log(oneList);
    // var fourList = document.getElementsByClassName("four");
    // console.log(fourList);

    // tagName
    // var divList = document.getElementsByTagName("div");
    // console.log(divList);
    // var pList = document.getElementsByTagName("p");
    // console.log(pList);


    // name
    var hobbyList = document.getElementsByName("hobby");
    console.log(hobbyList);








</script>

</html>